<template>
	<el-container>
		<el-header>
			<div class="left-panel">
                <el-checkbox label="全部库存" v-model="status" @change="checkChange"></el-checkbox>
				<sc-export-button :auth="'stock.export'" :apiObj="apiObj" :search="search"></sc-export-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-select v-model="search.ware_id" filterable placeholder="仓库" clearable>
						<el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id"/>
					</el-select>
                    <el-select v-model="search.brand_id" filterable placeholder="品牌">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.brand_name" :value="item.id" />
                    </el-select>
					<el-input v-model="search.goods_name" placeholder="产品名称" clearable @keyup.enter="upsearch"></el-input>
					<el-input v-model="search.goods_spec" placeholder="产品规格" clearable @keyup.enter="upsearch"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" @click="unsetSearch">重置</el-button>
				</div>
			</div>
		</el-header>
		<!--		 @sort-change="onSortChange"-->
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" tableName="stockTable" :column="defaultColumn" :sumColumn="['curr_stock']" show-summary remoteSummary row-key="id" @selection-change="selectionChange" stripe remoteSort @cell-dblclick="cellClick">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
				<template #spec="scope">
                    {{ scope.row.goods && scope.row.goods.goods_spec }}
				</template>
                <template #brand="scope">
                    {{ scope.row.brand_name }}
				</template>
                <template #ware="scope">
                    {{ scope.row.ware_name }}
				</template>
                <template #curr_stock="scope">
                    <div class="input-box">
                        <el-input size="mini" v-model="scope.row.curr_stock" v-if="scope.row.flag" :ref="`curr_stock` + scope.row.id"></el-input>
                        <div v-if="!scope.row.flag" :style="'color:' + ( scope.row.goods && scope.row.goods.stock_down && (scope.row.curr_stock < scope.row.goods.stock_down) ? '#F00' : '')">
                            {{ scope.row.curr_stock }}
                        </div>
                    </div>
				</template>
                <el-table-column label="操作" fixed="right" align="center" width="120">
					<template #default="scope">
						<el-button-group>
							<el-button type="primary" v-if="scope.row.flag" size="small" @click="cell_save(scope.row)">保存</el-button>
							<el-button type="danger" v-if="scope.row.flag" size="small" @click="scope.row.flag = false">取消</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

</template>

<script>
export default {
	name: '库存查询（列表）',
	components: {},
	data() {
		return {
			dialog: {},
			apiObj: this.$API.goods.stock,
			selection: [],
			search: {
				ware_id: null,
				keyword: null,
			},
			wareList: [],
			brandList:[],
			defaultColumn: [
				{
					label: "产品名称",
					prop: "goods_name",
					// width: "100"
				},
                {
					label: "产品规格",
					prop: "spec",
					// width: "100"
				},
				// {
				// 	label: "产品编号",
				// 	prop: "goods_code",
				// 	// width: "100"
				// },
                {
					label: "产品类型",
					prop: "cate_name",
					// width: "150",
				},
				{
					label: "产品品牌",
					prop: "brand",
					// width: "150",
				},
				{
					label: "仓库",
					prop: "ware",
					// width: "100",
				},
				{
					label: "库存数量",
					prop: "curr_stock",
					// width: "100",
					sortable: true
				},
			],
            status: true
		}
	},
	mounted() {
		this.getWare()
		this.getBrand()
	},
	methods: {
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		/**重置*/
		unsetSearch() {
			Object.keys(this.search).forEach(key => {
				this.search[key] = null;
			});
			this.upsearch()
		},
		/**获取仓库*/
		async getWare() {
			var res = await this.$API.goods.ware.all.get();
			this.wareList = res.data;
		},
        /**获取品牌*/
		async getBrand(){
			var res = await this.$API.goods.goodsBrand.all.get();
			this.brandList = res.data
		},
        cellClick(row) {
			row.flag = true
			var that = this
			setTimeout(function () {
				that.$nextTick(() => {
					that.$refs['curr_stock' + row.id].focus()
				})
			}, 100)
		},
        async cell_save(row) {
            let query = {
                number: row.curr_stock,
                id: row.id,
                ware_id: row.ware_id,
            }
            var res = await this.$API.ware.number.get(query);
            if (res.code == 1) {
                row.flag = false
                this.$refs.table.refresh()
                this.$message.success('保存成功')
            } else {
                this.$message.error(res.msg)
            }
		},
        checkChange(e){
            if(e == true){
                this.search.allocation = null
            }else {
                this.search.allocation = 1
            }
            this.$refs.table.upData(this.search)
        },
	}
}
</script>

<style></style>
